<template>
	<view class="pagination-menu">
		<swiper class="menu-swiper" :style="{ height: containerHeight + 'px' }" @animationfinish="onChange">
			<swiper-item class="menu-container" v-for="(p, pindex) in paginationMenus" :key="pindex">
				<view class="menu-list">
					<view class="menu-item" v-for="(item, index) in p" :key="index" @click="pageRoute(item.link)">
						<image class="icon" :src="item.logo" mode="aspectFill"></image>
						<view class="label">{{ item.title }}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="indicator-bar" v-if="menuPage>1">
			<view class="bar-content">
				<text :class="['bar-item', { active: index == currentIndex }]" v-for="(item, index) in paginationMenus"
					:key="index"></text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		getCurrentInstance,
		onMounted,
		nextTick,
		reactive,
		toRefs
	} from 'vue';

	defineOptions({
		name: 'pagination-menu'
	});

	const props = defineProps({
		list: Array
	});

	const state = reactive({
		currentIndex: 0
	});

	const paginationMenus = computed(() => {
		const count = 10;
		const list = props.list;
		const len = list.length;
		const pages = [];
		let lineNum = len % count == 0 ? len / count : Math.floor(len / count + 1);
		for (var i = 0; i < lineNum; i++) {
			let temp = list.slice(i * count, i * count + count);
			pages.push(temp);
		}
		return pages;
	});

	const containerHeight = computed(() => {
		const list = props.list;
		const len = list.length;
		let height = 0;
		if (len > 0 && len <= 5) {
			height = 93.96875;
		} else {
			height = 187.9375;
		}
		return height;
	});

	const menuPage = computed(() => {
		const list = props.list;
		const len = list.length;
		let menuPage = 0;
		if (len > 0 && len <= 10) {
			menuPage = 1;
		} else {
			menuPage = 2;
		}
		return menuPage;
	});

	function onChange(e) {
		state.currentIndex = e.detail.current;
	}

	function pageRoute(url) {
		if (!url) {
			uni.navigateTo({
				url
			});
		}
	};

	const {
		currentIndex
	} = toRefs(state);
</script>

<style lang="scss">
	.pagination-menu {
		position: relative;
		padding-top: 48rpx;
		padding-bottom: 24rpx;

		.menu-swiper {
			// height: 100%;
		}

		.menu-list {
			display: flex;
			flex-wrap: wrap;
			padding: $margin-12 0;

			.menu-item {
				@include f-center($direction: column);
				flex: 0 0 20%;
				padding: $margin-12 0;

				.icon {
					width: 90rpx;
					height: 90rpx;
					border-radius: $radius-12;
					background-color: $bg-color;
				}

				.label {
					margin-top: $margin-12;
					font-size: $font-24;
					color: $content-color;
				}
			}
		}

		.indicator-bar {
			position: absolute;
			bottom: $margin-24;
			left: 50%;
			transform: translateX(-50%);

			.bar-content {
				@include f-center;
				height: 12rpx;
				background-color: $bg-inverse-color;
				border-radius: $radius-half;

				.bar-item {
					width: 32rpx;
					height: 100%;
					opacity: 0;
					transition: all .1s;

					&.active {
						background-color: $warning-color;
						opacity: 1
					}
				}
			}
		}
	}
</style>